<template>
    <div class="message">
        <!-- <h1>{{ text }}</h1> -->
        <h1>{{ user.name }}</h1>
        <h1>{{ user.age }}</h1>
        <button @click="onChange">Change</button>
    </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue';
interface IUser{
    name:string;
    age:number;
}

interface IEvents {
    (e:'change', age:number):void
}
// const props = defineProps({
    // text:String
    // user:IUser 报错，IUser是类型不能作为值传给user,采用泛型
// })
const props = defineProps<{user:IUser}>()

// const emit = defineEmits(['change'])
// const onChange = () => {
//     // emit('change', props.text)//事件名称和数据,发送数据给父组件
//     emit('change', props.user.name);
// }

const emit = defineEmits<IEvents>()
const onChange = () => {
    // emit('change', props.text)//事件名称和数据,发送数据给父组件
    emit('change', props.user.age);
}
</script>
<style scoped></style>